<template>
	<view class="chatFrame">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y " :scroll-into-view="topScroll"
		 :scroll-with-animation="scrollAnimation" @scrolltoupper="upper" :style="{height:visualHeight}">
			<uni-load-more :status="more" v-if="isShowLoad"></uni-load-more>
			<view class="chatFrameBox" v-for="(item, index) in list" :key="index">
				<view class="chatFrameListLeft me-fx-row-start-c" v-if=" item.sender.id == id  ">
					<image :src="item.sender.avatar" mode="" class="headImage marginLeft"></image>
					<view class="chatConter leftSJX">
						<text class="txt">{{item.content}}</text>
					</view>
					<image src="" mode="" v-if="image"></image>
					<view class="hongbao me-fx-row-start-c" v-if="hongbao">
						<image src="../../static/img/money-a.png" mode=""></image>
						<view class="">
							恭喜发财,大吉大利
						</view>
					</view>
				</view>
				<view class="me-fx-row-start-c" v-if="isGet">
					<image src="../../static/img/money-a.png" mode=""></image>
					<view class="">
						{{发送到}}领取了你的红包
					</view>
				</view>
				<view class="chatFrameListRight me-fx-row-start-c" v-if=" item.sender.id != id  ">
					<view class="chatConter rightSJX">
						<text class="txt">{{item.content}}</text>
					</view>
					<image src="" mode="" v-if="image"></image>
					<view class="hongbao me-fx-row-start-c" v-if="hongbao">
						<image src="../../static/img/money-a.png" mode=""></image>
						<view class="">
							恭喜发财,大吉大利
						</view>
					</view>
					<image :src="item.sender.avatar" mode="" class="headImage marginRight"></image>
				</view>
			</view>
			<view class="" style="height: 120rpx;">

			</view>
			<view :style="[{height:InputBottom+'px'}]">

			</view>
		</scroll-view>
		<view class="zhanweiBox" v-if="zhanweiBox">

		</view>
		<view class="bottomFiex">
			<view class="me-fx-row-start-c importBox">
				<image src="../../static/img/newimg/yuying.png" mode="" class="icon marginRight"></image>
				<textarea type="text" value="" class="inputVal" id="keyBtn" @input="onInput" @focus="InputFocus" @blur="InputBlur"
				 v-model="value" />
				<image src="../../static/img/newimg/moge.png" mode="" class="icon marginRight" v-if="isSend"></image>
				<image src="../../static/img/newimg/more.png" mode="" class="icon " @click="addMore" v-if="isSend" ></image>
				<view class="sendBtn" v-if="issendBtn" @click="sendBtn">
					发送
				</view>
			</view>
			<view class="picBox me-fx-row-start-c" v-if="tkShow">
				<view class="me-fx-col-sb-c listBox">
					<image src="../../static/img/newimg/ph.png" mode=""></image>
					<view class="">
						图片
					</view>
				</view>
				<view class="me-fx-col-sb-c listBox">
					<image src="../../static/img/newimg/ph-a.png" mode=""></image>
					<view class="">
						拍照
					</view>
				</view>
				<view class="me-fx-col-sb-c listBox">
					<image src="../../static/img/newimg/ph-b.png" mode=""></image>
					<view class="">
						红包
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import io from '../../js_sdk/hyoga-uni-socket_io/uni-socket.io.js';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {uniLoadMore},
		data() {
			return {
				CustomBar: this.CustomBar,
				image: false,
				hongbao: false,
				isGet: false,
				storeName: '发送到',
				tkShow: false,
				page: 1,
				id: '',
				list: [],
				username: '',
				isSend: true,
				issendBtn: false,
				value: '',
				otherID: '',
				userId: '',
				zhanweiBox: false,
				socket: '',
				dataList: [],
				scrollTop:0,
				topScroll:'',
				more:'loading',
				lastPage:1,
				isShowLoad:false,
				scrollAnimation: false, //滑动动画开关
				visualHeight:'',
				InputBottom:0,
				num:999
			}
		},
		created() {
			this.getList(this.page, this.id)// 这个是异步的
			this.getUid()
			uni.getSystemInfo({
					success: function(res) {
						this.visualHeight = res.windowHeight
					}
				})
				this.getClear()
		},
			
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			if (options.username) {
				this.username = options.username
				uni.setNavigationBarTitle({
					title: this.username
				})
			}
		},
		
		methods: {
			InputFocus(e) {
				this.zhanweiBox=true
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.zhanweiBox=false
				this.InputBottom = 0
			},
			getClear(){
				this.$u.put('/chat/unread/clear',{id:this.id}).then(res => {
						if (res) {
							
						}
					})
					.catch((res) => {})
			},
		    upper() {
				this.isShowLoad =true
				if(this.page >= this.lastPage){
					this.isShowLoad =false
				}else {
					this.page++
					this.getList(this.page, this.id)
				}
				
		    },
			sendBtn() {  
				let that = this
				that.socket = io("http://fenghuangvip888.cn:9501?id=" + that.userId, {
					transports: ['websocket']
				}); //id为当前用户id
				that.socket.on('chatcallback', function(data) { //提交聊天消息后的回调
					console.log(data)
					that.dataList = data.message
					that.dataList.sender = {}
					that.dataList.sender = data.from
					that.list.push(that.dataList)
					that.value =''
					that.isSend = true
					that.issendBtn = false
					console.log(that.value,'value',that.isSend)
					that.$nextTick(function() {
						that.scrollTop = this.num++;
					});
				});
			
				// 实时更新消息
				that.socket.emit('chat', {
					to: that.id, //接收人的用户id
					message: that.value, //消息
					type: 1
				})
			},
			onInput(e) {
				console.log(e.detail.value,'e')
				if (e.detail.value != '') {
					this.isSend = false
					this.issendBtn = true
				} else {
					this.isSend = true
					this.issendBtn = false
				}
				this.value = e.detail.value
			},

			addMore() {
				let that =this
				if (that.tkShow) {
					that.tkShow = false
					that.zhanweiBox=false
				} else {
					that.tkShow = true
					that.zhanweiBox=true
				}
				that.$nextTick(function() {
				     that.scrollTop = that.num++;
					 console.log(that.scrollTop,'this.scrollTop')
				    });
			},
			getList(page, id) {
				let that = this
				this.$u.get('/chat/content/' + page, {
						id: id
					}).then(res => {
						if (res) {
							console.log(res.data.list.last_page,'res.data.list.last_page')
							this.lastPage = res.data.list.last_page
							if(res.data.list.last_page == 1){
								that.list = res.data.list.data
							}else {
								that.list.unshift(...res.data.list.data)
							}
							this.$nextTick(function() {
							     this.scrollTop = 99999;
							    });
						}
					})
					.catch((res) => {})
			},
			getUid() {
				this.$u.get('user/base/uid').then(res => {
						if (res) {
							this.userId = res.data.id
						}
					})
					.catch((res) => {})
			},
			getScrollId(id){
				if (id) {
					this.$nextTick(() => {
						this.topScroll = 'scrollView' + id;
					});
				}
			}
		}
	}
</script>

<style>
	
	.chatFrame /deep/.uni-scroll-view-content {
		height: 100%;
	}
	.scroll-Y{
		height: 100%;
		}
	.zhanweiBox {
		height: 200rpx;
		width: 100%;
	}

	.sendBtn {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		color: white;
		/* padding: 0 16rpx; */
		background-color: #55D479;
		width: 140rpx;
	}

	.chatFrame {
		background-color: #F5F5F5;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}

	.chatFrameBox {
		padding:10rpx 25rpx 10rpx;
		box-sizing: border-box;
	}

	.chatFrameListLeft {
		display: flex; 
		justify-content: space-between;
		align-items: flex-start;
		/* margin-bottom: 30rpx; */
	}

	.headImage {
		width: 15%;
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
	}

	.rightSJX {
		margin-left: 15%;
		position: relative;
	}

	.chatConter {
		width: 70%;
		box-sizing: border-box;

	}

	.chatConter .txt {
		background: white;
		display: inline-block;
		padding: 27rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
		text-align: justify;
	}

	.chatFrameListRight {
		text-align: right;
		margin-left: 15%;
	}

	.marginLeft {
		margin-right: 15rpx;
	}

	.marginRight {
		margin-left: 15rpx;
	}

	.leftSJX {
		position: relative;
		margin-right: 15%;
	}

	.leftSJX::before {
		content: ' ';
		width: 0;
		height: 0;
		border-top: 16rpx solid transparent;
		border-right: 16rpx solid white;
		border-bottom: 16rpx solid transparent;
		position: absolute;
		top: 30rpx;
		left: -12rpx;
	}

	.rightSJX::before {
		content: ' ';
		width: 0;
		height: 0;
		border-top: 16rpx solid transparent;
		border-left: 16rpx solid white;
		border-bottom: 16rpx solid transparent;
		position: absolute;
		top: 30rpx;
		right: -12rpx;
	}

	.bottomFiex {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #F6F6F6;

	}

	.icon {
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
	}

	.inputVal {
		width: 70%;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		margin-right: 27rpx;
		padding: 0rpx 0 0 10rpx;
		resize: none;
		line-height: 80rpx;
	}

	.importBox {
		padding: 0 20rpx;
		height: 114rpx;
		border: 1px solid #E5E6E6;
		border-left: none;
		border-right: none;
	}

	.picBox {
		background-color: #F5F5F5;
		padding: 30rpx 48rpx 200rpx;
	}

	.listBox {
		margin-right: 46rpx;
	}

	.listBox image {
		width: 128rpx;
		height: 128rpx;
		background: rgba(254, 254, 254, 1);
		border-radius: 32rpx;
	}

	.listBox view {
		/* text-align: center; */
		margin-top: 10rpx;
	}

	.bottomFiex .marginRight {
		margin-right: 27rpx;
	}
</style>
